import { defineConfig, loadEnv } from 'vite';
import { resolve } from 'path';
import vue from '@vitejs/plugin-vue';
// vue函数的自动导入
import AutoImport from 'unplugin-auto-import/vite';
// element-plus 按需导入
import Components from 'unplugin-vue-components/vite';
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
// 静态资源压缩
import viteCompression from 'vite-plugin-compression';
// 打包分析,可视化并分析构建包，查看哪些模块占用空间大小，以及模块的依赖关系
import { visualizer } from 'rollup-plugin-visualizer';
// CSS规则自动添加供应商前缀 - 为兼容所有浏览器，部分CSS属性需要加上不同的浏览器前缀
import autoprefixer from 'autoprefixer';

const pathResolve = (dir) => {
    return resolve(__dirname, dir);
};

// https://vitejs.dev/config/
export default defineConfig(({command, mode}) => {
    // 根据当前工作目录中的 `mode` 加载 .env 文件
    // 设置第三个参数为 '' 来加载所有环境变量，而不管是否有 `VITE_` 前缀。
    const env = loadEnv(mode, process.cwd(), '');
    return {
        base:env.VITE_APP_BASE_PATH, // 打包后，资源引用的前缀
        root: process.cwd(), // 项目根目录（index.html 文件所在的位置）。可以是一个绝对路径，或者一个相对于该配置文件本身的相对路径。
        resolve: {
            alias: [ // 项目中引用文件的路径别名配置
                // 绝对路径重命名：@/xxxx => ./src/xxxx
                {
                    find: "@",
                    replacement: pathResolve('./src'),
                },
            ]
        },
        server: { // 服务端配置
            host:'0.0.0.0', // 指定服务器应该监听哪个 IP 地址。 如果将此设置为 0.0.0.0 或者 true 将监听所有地址，包括局域网和公网地址。
            port:8080, // 指定开发服务器端口
            proxy: {
                [env.VITE_APP_CLOUDMUSIC_API_KEY]: {
                    target: env.VITE_APP_CLOUDMUSIC_API_URL,
                    changeOrigin: true, //支持跨域
                    rewrite: (path) => path.replace(/^\/apimusic/, '')
                },
                [env.VITE_APP_API_KEY]: {
                    target: env.VITE_APP_API_URL, // 代理域名
                    changeOrigin: true, //支持跨域
                    //重写路径,替换/api
                    rewrite: (path) => path.replace(/^\/api/, '')
                },
            },
        }, 
        preview: { // 本地开启服务器预览静态页面
            // port: 5173,
        },
        plugins: [ // 插件配置
            vue({
                // reactivityTransform:true // 开启ref转换, ref前加上$ 告别 .value (在vue3.4版本被弃用)
            }),
            /**
             *  自动引入vue的ref、toRefs、onmounted等，无需在页面中再次引入
             *  https://github.com/antfu/unplugin-auto-import
            */
            AutoImport({
                imports:[
                    'vue',
                    'vue-router',
                    'pinia'
                ],
                dts : false // 是否自定义路径
            }),
            /**
             * element-plus 按需导入
             * 在项目中随意使用组件了，unplugin-vue-components会自动找到template中的组件并且自动注册
            */
            Components({
                resolvers: [ElementPlusResolver()],
            }),
            /**
             * 生成压缩包gz
             * 
            */
            viteCompression({
                verbose: true, // 输出压缩成功
                disable: false, // 是否禁用
                deleteOriginFile: false, // 压缩后是否删除原文件
                threshold: 1, // 体积大于阈值会被压缩，单位是b
                algorithm: 'gzip', // 压缩算法
                ext: '.gz',// 生成的压缩包后缀
            }),
            visualizer({
                // 打包后自动打开分析报告
                open: true
            }),
        ],
        // 
        css: {
            preprocessorOptions: {
                scss: {
                    additionalData: `
                    @import "@/theme/public.scss";
                    `
                }
            },
            postcss:{
                plugins: [
                    // CSS规则自动添加供应商前缀
                    autoprefixer({
                        overrideBrowserslist: [
                            "Android 4.1",
                            "iOS 7.1",
                            "Chrome > 31",
                            "ff > 31",
                            "ie >= 8"
                            //'last 2 versions', // 所有主流浏览器最近2个版本
                        ],
                        grid: false
                    })
                ]
            }
        },
        optimizeDeps: {
            include: [], // 默认情况下，不在 node_modules 中的，链接的包不会被预构建。使用此选项可强制预构建链接的包。
            exclude: [] // 在预构建中强制排除的依赖项。
        },
        build: { 
            // 清除console和debugger
            terserOptions: {
                compress: {
                drop_console: true,
                drop_debugger: true,
                },
            },
            target: 'modules', // 设置最终构建的浏览器兼容目标。'modules'，这是指 支持原生 ES 模块、原生 ESM 动态导入 和 import.meta 的浏览器
            outDir: 'dist', // 指定输出路径
            assetsInlineLimit: '4096', // 小于此阈值的导入或引用资源将内联为 base64 编码
            chunkSizeWarningLimit: 500, // chunk 大小警告的限制
            minify: 'terser', // 混淆器，terser构建后文件体积更小
            emptyOutDir: true, //打包前先清空原有打包文件
        }
    }
    
})
